<template>
  <div class="banner">
    <div class="w1200">
      <swiper
        class="banner_wrap"
        :options="swiperOption"
        v-if="bannerInit"
        ref="mySwiper"
      >
        <swiper-slide v-for="item of banners" :key="item.imageUrl">
          <el-image
            :src="item.imageUrl"
            :alt="item.typeTitle"
            class="banner_img"
            @click="pathHandler(item)"
          >
            <div slot="placeholder" class="image-slot">
              <i class="iconfont icon-placeholder"></i>
            </div>
          </el-image>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { reqGetBanners } from "../../api/home";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "",
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    bannerInit() {
      return this.banners.length;
    },
  },
  data() {
    return {
      banners: [],
      // swiper配置
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  async mounted() {
    try {
      const res = await reqGetBanners();
      this.banners = res.banners;
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    pathHandler(item) {
      switch (item.targetType) {
        case 1: // 单曲
          this.$router.push({ path: "/song", query: { id: item.targetId } });
          break;
        case 10: // 专辑
          this.$router.push({ path: "/album", query: { id: item.targetId } });
          break;
        case 1000: // 歌单
          this.$router.push({
            path: "/playlist",
            query: { id: item.targetId },
          });
          break;
        case 1004: // MV
          this.$router.push({ path: "/mv", query: { id: item.targetId } });
          break;
        case 3000: // 外链
          window.open(item.url, "_blank");
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  height: 220px;
}

.banner_wrap {
  position: relative;
  font-size: 0;
  padding: 40px 0;
  .banner_img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .swiper-slide,
  .el-image {
    height: 140px;
  }
}
</style>
